<template>
	<section>
		<main class="bgwhite pb30 pl10 pr10">
			<mt-header fixed title="投资者课堂">
				<mt-button slot="left" icon="back" @click="goBack">
					<a class="white" href="javascript:;">返回</a>
				</mt-button>
			</mt-header>
			<ul class="mt50 bgfontred shadow br4 pl30 pr30 pt15 pb5">
				<li>
					<router-link :to="{path:'/news/detail',query: {safe:'safe'}}">
						<span>
							<img :src="imgSafe" width="24" height="24" alt="">
						</span>
						<p class="lh30 fs12 white">安全知识</p>
					</router-link>
				</li>
				<li>
					<router-link to="/news/noob">
						<span>
							<img :src="imgNew" width="24" height="24" alt="">
						</span>
						<p class="lh30 fs12 white">新手教程</p>
					</router-link>
				</li>
				<li>
					<router-link :to="{path:'/news/detail',query: {base:'base'}}">
						<span>
							<img :src="imgKnowledge" width="24" height="24" alt="">
						</span>
						<p class="lh30 fs12 white">基础知识</p>
					</router-link>
				</li>
			</ul>
			<ol>
				<li class="mt15" :key="idx" v-for="(item,idx) in data">
					<router-link :to="{path:'/news/detail',query: {pram:item.id}}">
						<div class="img-wrap br4 shadow">
							<img :src="item.cover" alt="" width="100%">
							<p class="lh30 fs12 tl white"><span class="fl mr10"></span>{{item.title}}</p>
						</div>
					</router-link>
				</li>
			</ol>
		</main>
	</section>
</template>
<script>

	import axios from 'axios'
	import { MessageBox, Toast, Indicator } from 'mint-ui'

	export default {
		name: "Classroom",
		data() {
			return {
				data: [],
				imgSafe: "./static/imgs/classroom-safe.svg",
				imgNew: "./static/imgs/classroom-new.svg",
				imgKnowledge: "./static/imgs/classroom-knowledge.svg",
			}
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				Indicator.open({
					text: "请稍候...",
					spinnerType: "fading-circle"
				});
				axios({
					methods: "get",
					url: '/user/news/findPlatformNewsList.do',
					params: {
						offset: 0,
						size: 20,
						type: 13,
					}
				})
					.then((res) => {
						Indicator.close();
						res = res.data;
						if (res.code == 200) {
							console.log(res);
							this.data = res.data;
						} else {
							Toast(res.msg);
						}
					})
			},
			goBack() {
				window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
			}
		},

	}
</script>
<style scoped>
	ul {
		display: flex;
		justify-content: space-between;
	}

	ol li {
		border-radius: 2px;
		overflow: hidden;
	}

	ol div {
		width: 100%;
		height: 1rem;
		overflow: hidden;
	}

	.img-wrap {
		height: 120px;
		position: relative;
		overflow: hidden;
	}

	.img-wrap p {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3)
	}

	ol p span {
		width: 3px;
		background-color: #fff;
		height: 15px;
		margin-left: 10px;
		margin-top: 7px;
	}
</style>